<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<u-form :model="form1" ref="form1" :label-width="200" input-align="right" :clearable="false">
			<view class="card">
				<view class="content">
					<u-form-item label="单行文本" prop="text">
						<vk-data-input v-model="form1.text" placeholder="请输入单行文本"/>
					</u-form-item>
					<u-form-item label="多行文本" prop="textarea" label-position="top">
						<vk-data-input v-model="form1.textarea" placeholder="请输入多行文本" type="textarea" input-align="left"/>
					</u-form-item>
					<u-form-item label="金额" prop="money">
						<vk-data-input v-model="form1.money" placeholder="请输入金额" type="money" />
						<text class="right-text" slot="right">元</text>
					</u-form-item>
					<!-- 注意: vue3时插槽语法要改成 <template v-slot:right> </template> -->
					<!-- <template v-slot:right>
						<text class="right-text" slot="right">元</text>
					</template> -->
					<u-form-item label="数字输入" prop="number">
						<vk-data-input v-model="form1.number" placeholder="请输入数字" type="number" :precision="2" />
					</u-form-item>
					<u-form-item label="单选" prop="radio">
						<vk-data-input-radio
							v-model="form1.radio2"
							:localdata="[
								{ value: 1, label: '选项1' },
								{ value: 2, label: '选项2' },
							]"
						></vk-data-input-radio>
					</u-form-item>
					<u-form-item label="单选" prop="radio">
						<vk-data-input-radio
							v-model="form1.radio"
							:localdata="[
								{ value: 1, label: '选项1' },
								{ value: 2, label: '选项2' },
								{ value: 3, label: '选项3' },
								{ value: 4, label: '选项4' },
								{ value: 5, label: '选项5' }
							]"
						></vk-data-input-radio>
					</u-form-item>
					<u-form-item label="下拉选择" prop="select">
						<vk-data-input-select
							v-model="form1.select"
							:localdata="[
								{ value: 1, label: '男' },
								{ value: 2, label: '女' },
								{ value: 0, label: '保密' }
							]"
						></vk-data-input-select>
					</u-form-item>
					<u-form-item label="开关" prop="switch">
						<u-switch v-model="form1.switch" active-color="var(--main)"></u-switch>
					</u-form-item>
				</view>
			</view>

			<view class="footer">
				<view class="btn-box">
					<view class="secondary-btn" @click="resetFields">重置</view>
					<view class="main-btn" @click="submit">提交</view>
				</view>
			</view>
			
		</u-form>
		
		<view style="display: block;height: 100rpx;"></view>


		<!-- 页面内容结束 -->
	</view>
</template>

<script>
var vk = uni.vk;
export default {
	data() {
		// 页面数据变量
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				text: "",
				textarea: "",
				money: "",
				number: "",
				radio: 1,
				checkbox: [],
				select: "",
				switch:false
			},
			rules: {
				text: [
					{ required: true, type: "string", message: "请输入单行文本", trigger: ["change", "blur"] }
				],
				number: [
					{ required: true, type: "number", message: "请输入数字", trigger: ["change", "blur"] }
				]
			},
			scrollTop: 0,
			loading: false
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		vk = uni.vk;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		let that = this;
		that.originalForm = vk.pubfn.copyObject(that.form1);
		that.$refs.form1.setRules(that.rules);
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
	onUnload(){},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
		
		},
		// 表单提交
		submit() {
			let that = this;
			let { form1 } = that;
			that.$refs.form1.validate(valid => {
				if (valid) {
					vk.callFunction({
						url: '云函数路径',
						title:'请求中...',
						data:form1,
						success:function(data){
							vk.alert("提交成功");
						}
					});
				}
			});
		},
		// 表单重置
		resetFields() {
			let that = this;
			that.$refs["form1"].resetFields();
			that.form1 = vk.pubfn.copyObject(that.originalForm);
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
	.app{
		--main: #4590f9;
		--bgcolor: #f8f8fa;
		background-color: var(--bgcolor);
		min-height: calc(100vh - var(--window-top));
		
		.card{
			background-color: #ffffff;
			margin-top: 20rpx;
			.content{
				padding: 20rpx 30rpx;
				.right-text{
					color: #303133;
				}
			}
			.title{
				padding: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom:1px solid #f8f8fa;
				background-color: #ffffff;
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 99;
		.btn-box {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			> view {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.secondary-btn {
				background-color: #ffffff;
			}
			.main-btn {
				background-color: var(--main);
				color: #ffffff;
			}
		}
	}
	
</style>
